
@extends('layouts._main')

@section('title','我的服务')

@section('css')
    <style>
        body{
            background-color: #eee;
        }
        .weui-grids{
            padding: 10px;
        }
        .weui-before-left:before{
            content: " ";
            position: absolute;
            top: 0;
            width: 1px;
            bottom: 0;
            border-left: 1px solid #D9D9D9;
            border-right: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
        }
        .weui-before-left:after{
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #D9D9D9;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .weui-grid{
            background-color: #fff;
            width: 33.2%;;
            margin-left: 0.1%;
            margin-bottom: 0.1%;
        }
        .weui-grid__icon {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        .weui-grid__icon + .weui-grid__label {
            margin-top: 15px;
        }
    </style>
@endsection

@section('container')
    <div class="page grid js_show">
        <div class="weui-grids">
            <a href="javascript:;" style="margin-left: 0;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service1.png" alt="">
                </div>
                <p class="weui-grid__label">周明娟工作室</p>
            </a>
            <a href="{{ route('invoice') }}" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service2.png" alt="">
                </div>
                <p class="weui-grid__label">电子发票</p>
            </a>
            <a href="javascript:;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service3.png" alt="">
                </div>
                <p class="weui-grid__label">停车系统</p>
            </a>

            <a href="javascript:;" style="margin-left: 0;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service4.png" alt="">
                </div>
                <p class="weui-grid__label">副营介绍</p>
            </a>
            <a href="javascript:;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service5.png" alt="">
                </div>
                <p class="weui-grid__label">在线客服&在线投诉</p>
            </a>
            <a href="javascript:;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service6.png" alt="">
                </div>
                <p class="weui-grid__label">店铺查询</p>
            </a>

            <a href="javascript:;" style="margin-left: 0;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service7.png" alt="">
                </div>
                <p class="weui-grid__label">包邮&充电服务</p>
            </a>
            <a href="javascript:;" class="weui-grid weui-before-left">
                <div class="weui-grid__icon">
                    <img src="./images/service8.png" alt="">
                </div>
                <p class="weui-grid__label">线下活动</p>
            </a>

        </div>
    </div>
@endsection